<template>
	<view class="myself">
		<!-- #ifdef MP -->
		<view :style="{ height: mpbarheight + 'px', backgroundColor: 'transparent' }"></view>
		<!-- #endif -->
		<view class="bg">
			<image src="../../static/imgs/mybg.png" mode="" style="width: 100%;height: 100%;"></image>
		</view>
		<view class="my_main">
			<view class="topheader">
				<view class="u-flex u-row-left u-col-center u-p-26">
					<u-avatar :src="userImg" mode="circle" :size="120" style="margin-left: 10rpx;margin-right: 28rpx;"></u-avatar>
					<view class="rightinfo u-flex-1">
						<u-button v-if="!islogined" class="loginbox" :plain="true" :hair-line="false" :custom-style="{
								border: 'none',
								backgroundColor: 'transparent',
								color: '#101010',
								fontWeight: 600,
								fontSize: '32rpx',
								textAlign: 'left',
								marginLeft: '0',
								padding: '0',
								width: '192rpx'
							}"
						 open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="wxGetUserInfo">
							点击登录/注册
						</u-button>
						<view v-else class="u-flex u-row-between u-col-center">
							<view class="logined">
								<view class="logintop">
									<text class="user">{{ userName }}</text>
									<!-- <text class="vip">
										<text class="iconfont icon-crown" style="font-size: 24rpx;margin-right: 10rpx;"></text>
										<text>{{ level }}</text>
									</text> -->
								</view>
								<view class="invitation u-flex u-col-center">
									<text>邀请码：{{ my_code }}</text>
									<!-- <text class="lines"></text> -->
									<text style="color: #FF0303;padding-left: 18rpx;" @click="docopy">复制</text>
								</view>
							</view>
							<view class="u-m-r-8" @click="goNext(2)">
								<image src="../../static/imgs/setting.png" mode="" style="width: 60rpx;height:60rpx"></image>
							</view>
						</view>
					</view>
				</view>
				<u-line color="rgba(187,187,187,0.3)" />
				<view class="u-p-16 u-p-l-30 u-p-r-30">
					<text class="iconfont icon-smile" style="margin-right: 20rpx;"></text>
					<text>赚了一只带来好运的招财猫的钱。</text>
				</view>
			</view>
			<view class="myinfo">
				<view class="title u-flex u-row-between u-col-center">
					<text>我的资产</text>
					<view class="u-flex u-row-left u-col-center" style="color: #858585;" v-if="islogined" @click="goNext(6)">
						<text>资产详情和提现</text>
						<u-icon name="arrow-right" color="#292929" size="28"></u-icon>
					</view>
				</view>
				<u-line color="rgba(187,187,187,0.3)" />
				<view class="infodata">
					<view class="top u-flex u-row-between u-col-center" @click="goNext(7)">
						<view class="u-text-left">
							<view class="">账户余额</view>
							<view class="bold">
								<u-count-to :start-val="0" :end-val="parseInt(myAsset.price)" :duration="2000" :bold="true" :color="parseInt(myAsset.price) === 0 ? 'rgb(183,183,183)' : '#101010'"
								 :decimals="2" :font-size="36" separator="," :use-easing="true"></u-count-to>
							</view>
						</view>
						<view class="u-text-right">
							<view class="">昨日返赚</view>
							<view class="bold" :style="{
									color: myAsset.change_price > 0 ? '#F95D4E' : 'rgba(16, 16, 16, 0.30)'
								}">
								<text v-if="myAsset.change_price > 0" :style="{
										color: myAsset.change_price > 0 ? '#F95D4E' : 'rgba(16, 16, 16, 0.30)'
									}">
									+
								</text>
								<u-count-to :start-val="0" :end-val="parseInt(myAsset.change_price)" :duration="2000" :bold="true" :color="parseInt(myAsset.change_price) === 0 ? 'rgb(183,183,183)' : '#F95D4E'"
								 :decimals="2" :font-size="36" separator="," :use-easing="true"></u-count-to>
							</view>
						</view>
					</view>
					<u-line color="rgba(187,187,187,0.3)" />
					<view class="header u-flex u-row-between u-col-center" @click="goNext(8, 1)">
						<view class="assetli" style="border-right: 2rpx solid rgba(187,187,187,0.3);">
							<view class="headline">今日预估</view>
							<view class="num">
								<u-count-to :start-val="0" :end-val="parseInt(myAsset.recommend_estimate_fee_today)" :duration="2000" :bold="true"
								 :color="parseInt(myAsset.recommend_estimate_fee_today) === 0 ? 'rgb(183,183,183)' : '#101010'" :decimals="2"
								 :font-size="24" separator="," :use-easing="true"></u-count-to>
							</view>
						</view>
						<view class="assetli">
							<view class="headline">本月预估</view>
							<view class="num">
								<u-count-to :start-val="0" :end-val="parseInt(myAsset.recommend_estimate_fee)" :duration="2000" :bold="true"
								 :color="parseInt(myAsset.recommend_estimate_fee) === 0 ? 'rgb(183,183,183)' : '#101010'" :decimals="2"
								 :font-size="24" separator="," :use-easing="true"></u-count-to>
							</view>
						</view>
					</view>
					<u-line color="rgba(187,187,187,0.3)" />
					<view class="header u-flex u-row-between u-col-center" @click="goNext(8, 2)">
						<view class="assetli" style="border-right: 2rpx solid rgba(187,187,187,0.3);">
							<view class="headline">今日结算</view>
							<view class="num">
								<u-count-to :start-val="0" :end-val="parseInt(myAsset.recommend_actual_fee)" :duration="2000" :bold="true"
								 :decimals="2" :font-size="24" :color="parseInt(myAsset.recommend_actual_fee) === 0 ? 'rgb(183,183,183)' : '#101010'"
								 separator="," :use-easing="true"></u-count-to>
							</view>
						</view>
						<view class="assetli">
							<view class="headline">本月结算</view>
							<view class="num">
								<u-count-to :start-val="0" :end-val="parseInt(myAsset.month_change_price)" :duration="2000" :bold="true"
								 :decimals="2" :color="parseInt(myAsset.month_change_price) === 0 ? 'rgb(183,183,183)' : '#101010'" :font-size="24"
								 separator="," :use-easing="true"></u-count-to>
							</view>
						</view>
					</view>
					<u-line color="rgba(187,187,187,0.3)" />
					<view class="header u-flex u-row-between u-col-center" @click="goNext(9)">
						<view class="assetli" style="border-right: 2rpx solid rgba(187,187,187,0.3);">
							<view class="headline">正在提现</view>
							<view class="num">
								<u-count-to :start-val="0" :end-val="parseInt(myAsset.withdraw_price)" :duration="2000" :bold="true" :decimals="2"
								 :color="parseInt(myAsset.withdraw_price) === 0 ? 'rgb(183,183,183)' : '#101010'" :font-size="24" separator=","
								 :use-easing="true"></u-count-to>
							</view>
						</view>
						<view class="assetli">
							<view class="headline">总提现</view>
							<view class="num">
								<u-count-to :start-val="0" :end-val="parseInt(myAsset.all_price)" :duration="2000" :bold="true" :color="parseInt(myAsset.all_price) === 0 ? 'rgb(183,183,183)' : '#101010'"
								 :decimals="2" :font-size="24" separator="," :use-easing="true"></u-count-to>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="fans">
				<view class="header  u-flex u-row-between u-col-center">
					<text class="title">我的粉丝</text>
					<view class="u-flex u-row-left u-col-center" @click="goNext(4)">
						<text>详情</text>
						<u-icon name="arrow-right" color="#292929" size="28"></u-icon>
					</view>
				</view>
				<u-line color="rgba(187,187,187,0.3)" />
				<view class="fansdata u-flex u-row-between u-col-center">
					<view class="fansone u-text-left">
						<view class="title">总数</view>
						<view class="num">
							<u-count-to :start-val="0" :end-val="parseInt(fansInfo.count)" :duration="2000" :bold="true" :decimals="0"
							 :color="parseInt(fansInfo.count) === 0 ? 'rgb(183,183,183)' : '#101010'" :font-size="36" separator=","
							 :use-easing="true"></u-count-to>
							<tetx style="color: #F95D4E;margin-left: 20rpx;" v-if="islogined && fansInfo.today_num !== 0">+ {{ fansInfo.today_num }}</tetx>
						</view>
					</view>
					<view class="fansone u-text-right">
						<view class="title">本月新增</view>
						<view class="num">
							<u-count-to :start-val="0" :end-val="parseInt(fansInfo.month_num)" :duration="2000" :bold="true" :color="parseInt(fansInfo.month_num) === 0 ? 'rgb(183,183,183)' : '#F95D4E'"
							 :decimals="0" :font-size="36" separator="," :use-easing="true"></u-count-to>
						</view>
					</view>
				</view>
			</view>
			<view class="collect">
				<view class="header  u-flex u-row-between u-col-center" @click="goNext(5)">
					<view class="u-flex u-row-left u-col-center">
						<image src="../../static/imgs/collect.png" mode="" style="width: 40rpx;height: 40rpx;"></image>
						<text class="title u-p-l-20">我的收藏</text>
					</view>
					<view class="u-flex u-row-left u-col-center">
						<text>{{ collectnum }}</text>
						<u-icon name="arrow-right" color="#292929" size="28"></u-icon>
					</view>
				</view>
			</view>
			<view class="collect">
				<view class="header  u-flex u-row-between u-col-center" @click="goNext(10)">
					<view class="u-flex u-row-left u-col-center">
						<image src="../../static/imgs/invite.png" mode="" style="width: 40rpx;height: 40rpx;"></image>
						<text class="title u-p-l-20">邀请好友</text>
					</view>
					<view class="u-flex u-row-left u-col-center">
						<u-icon name="arrow-right" color="#292929" size="28"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<u-back-top :scroll-top="scrollTop" top="600"></u-back-top>
	</view>
</template>

<script>
	import uniCopy from '@/js_sdk/xb-copy/uni-copy.js';
	export default {
		name: 'center',
		data() {
			return {
				collectnum: 0,
				scrollTop: 0,
				islogined: uni.getStorageSync('token') ? true : false,
				userImg: uni.getStorageSync('jxuser').img ? uni.getStorageSync('jxuser').img : '',
				userName: uni.getStorageSync('jxuser').user ? uni.getStorageSync('jxuser').user : '',
				my_code: uni.getStorageSync('jxuser').my_code ? uni.getStorageSync('jxuser').my_code : '',
				level: uni.getStorageSync('jxuser').level ? uni.getStorageSync('jxuser').level : '',
				mpbarheight: this.barHeight + this.capsuleHeight,
				code: '', //微信临时登录凭证
				openId: uni.getStorageSync('openid') ? uni.getStorageSync('openid') : '',
				myAsset: {
					price: '0', //余额
					change_price: '0', //昨日结算
					recommend_estimate_fee: 0, //本月预估
					month_change_price: '0', // 本月结算
					recommend_estimate_fee_today: 0, //今日预估
					recommend_actual_fee: 0, ///今日结算
					withdraw_price: '0', //提现中金额
					all_price: '0' //总提现金额
				},
				fansInfo: {
					today_num: 0, //今日新增
					month_num: 0, //本月新增
					count: 0 //粉丝总数
				},
				isloginout: '',
				flag: true
			};
		},
		//实例创建完成后被立即调用
		created() {},
		onLoad(option) {
			if (option.scene) {
				const scene = decodeURIComponent(option.scene);
				// this.skuId = scene.sku_id;
				// console.log('option.scene', scene);
				let arr = scene.split('&');
				if(arr.length>=2){
					this.skuId = arr[0];
					uni.setStorageSync('invitecode', arr[1]);
				}
			}
		},
		//挂载开始之前被调用
		beforeMount() {},
		onPullDownRefresh() {
			//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
			if (!this.islogined) {
				this.flag = false;
				setTimeout(function() {
					uni.stopPullDownRefresh(); //停止下拉刷新动画
				}, 500);
				return
			}
			this.getFansInfo();
			this.getUserAssets();
			this.getCommissonWithdrawal();
			this.getCollectionList();
			this.islogined = true;
			this.flag = false;
			setTimeout(function() {
				uni.stopPullDownRefresh(); //停止下拉刷新动画
			}, 500);
		},
		//初次渲染完成
		onReady() {},
		onPageScroll(obj) {
			// console.log(obj);
			this.scrollTop = obj.scrollTop;
		},
		//全局只触发一次
		onLaunch() {},
		//从后台进入前台
		onShow() {
			let _this = this;
			this.islogined = uni.getStorageSync('token') ? true : false;
			this.isloginout = uni.getStorageSync('isloginout') ? uni.getStorageSync('isloginout') : '';
			var isoverdues = this.getSetting();
			isoverdues.then(isAuth => {
				console.log('是否已经授权', isAuth);
				if (isAuth && this.islogined === false && this.isloginout === true) {
					this.updateUserInfo();
				} else {
					if (this.isloginout === '') {
						this.myAsset = {
							price: '0', //余额
							change_price: '0', //昨日结算
							recommend_estimate_fee: 0, //本月预估
							month_change_price: '0', // 本月结算
							recommend_estimate_fee_today: 0, //今日预估
							recommend_actual_fee: 0, ///今日结算
							withdraw_price: '0', //提现中金额
							all_price: '0' //总提现金额
						};
						this.fansInfo = {
							today_num: 0, //今日新增
							month_num: 0, //本月新增
							count: 0 //粉丝总数
						};
						this.openId = '';
						this.userImg = '';
						this.collectnum = 0;
					} else {
						if (this.flag) {
							this.getFansInfo();
							this.getUserAssets();
							this.getCommissonWithdrawal();
							this.getCollectionList();
							this.islogined = true;
							this.flag = false;
						}
					}
				}
			});
		},
		//前台进入后台
		onHide() {},
		methods: {
			onShareAppMessage(e) {
				return {
					title: '京东购物省钱，分享还能赚钱！',
					path: '/pages/home/index',
					imageUrl: '/static/imgs/share_img.png'
				};
			},
			//分享到朋友圈
			onShareTimeline(res) {
				return {
					title: '京东购物省钱，分享还能赚钱！',
					imageUrl: '/static/imgs/share_img.png'
				};
			},
			getCollectionList() {
				this.$u.api
					.getCollectionList()
					.then(res => {
						console.log(res);
						this.collectnum = res.data.length;
					})
					.catch(err => {
						console.log(err);
					});
			},
			getCommissonWithdrawal() {
				this.$u.api
					.getCommissonWithdrawal()
					.then(res => {
						// console.log(res);
						this.myAsset.recommend_estimate_fee_today = res.data.recommend_estimate_fee;
						this.myAsset.recommend_actual_fee = res.data.recommend_actual_fee;
						this.myAsset.withdraw_price = res.data.price;
						this.myAsset.all_price = res.data.all_price;
						uni.setStorageSync('assets', this.myAsset);
					})
					.catch(err => {
						console.log(err);
					});
			},
			getUserAssets() {
				this.$u.api
					.getUserAssets()
					.then(res => {
						// console.log('资产', res);
						this.myAsset.price = res.data.price;
						this.myAsset.change_price = res.data.change_price;
						this.myAsset.recommend_estimate_fee = res.data.recommend_estimate_fee;
						this.myAsset.month_change_price = res.data.month_change_price;
						uni.setStorageSync('price', this.myAsset.price);
						uni.setStorageSync('assets', this.myAsset);
					})
					.catch(err => {
						console.log(err);
					});
			},
			getFansInfo() {
				this.$u.api
					.getFansInfo()
					.then(res => {
						this.fansInfo = res.data;
					})
					.catch(err => {
						console.log(err);
					});
			},
			docopy() {
				uniCopy({
					content: this.my_code,
					success: res => {
						uni.showToast({
							title: res,
							icon: 'none'
						});
					},
					error: e => {
						uni.showToast({
							title: e,
							icon: 'none',
							duration: 3000
						});
					}
				});
			},
			//获取用户的当前设置
			getSetting() {
				return new Promise(function(resolve, reject) {
					uni.getSetting({
						success: function(res) {
							if (res.authSetting['scope.userInfo']) {
								console.log('当前已授权', res);
								resolve(true);
							} else {
								console.log('当前未授权', res);
								resolve(false);
							}
						}
					});
				}).catch(e => {
					console.log(e);
				});
			},
			//第一授权获取用户信息===》按钮触发
			wxGetUserInfo() {
				let _this = this;
				uni.getUserInfo({
					provider: 'weixin',
					success: function(infoRes) {
						// console.log('wx信息', infoRes);
						uni.setStorage({
							key: 'userInfo',
							data: infoRes.userInfo
						});
						// console.log('userInfo', uni.getStorageSync('userInfo'));
						_this.login();
					},
					fail(res) {}
				});
			}, //登录

			login() {
				let _this = this;
				uni.showLoading({
					title: '登录中...'
				});
				// var isoverdue = this.getSetting();
				// isoverdue.then(isAuth => {
				// 	console.log('是否已经授权', isAuth);
				// 	if (!isAuth) {
				// 		this.updateUserInfo();
				// 	} else {
				// 		// 1.wx获取登录用户code
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						console.log('code', loginRes);
						_this.code = loginRes.code;
						_this.$u.api
							.getOpenId({
								code: _this.code
							})
							.then(res => {
								// console.log('openid', res);
								_this.openId = res.data.openid;
								uni.setStorageSync('openid', res.data.openid);
								if (res.data.status === 1) {
									_this.goNext(1);
								} else {
									_this.updateUserInfo();
								}
							});
					}
				});
				// 	}
				// });
			},
			getUserInfo() {
				this.$u.api
					.getUserInfo()
					.then(res => {
						// console.log(res);
						uni.setStorageSync('jxuser', res.data);
						this.userName = res.data.user; //昵称
						this.userImg = res.data.img; //头像
						this.my_code = res.data.my_code; //邀请码
						this.level = res.data.level; //等级
					})
					.catch(err => {
						console.log(err);
					});
			},
			//向后台更新信息
			updateUserInfo() {
				let _this = this;
				this.$u.api
					.doLogin({
						openId: this.openId
					})
					.then(res => {
						// console.log('登录成功', res);
						uni.setStorageSync('token', res.data.token);
						uni.setStorageSync('isloginout', true);
						uni.hideLoading();
						this.$refs.uToast.show({
							title: '登录成功!',
							type: 'success'
						});
						this.getUserInfo();
						this.getFansInfo();
						this.getUserAssets();
						this.getCommissonWithdrawal();
						this.getCollectionList();
						this.islogined = true;
					})
					.catch(err => {
						console.log(err);
					});
			},
			goNext(val, num) {
				console.log('000', val);
				switch (val) {
					case 1:
						uni.navigateTo({
							url: '/pages/center/register/register',
							animationType: 'pop-in',
							animationDuration: 300
						});
						break;
					case 2:
						uni.navigateTo({
							url: '/pages/center/setting/setting',
							animationType: 'pop-in',
							animationDuration: 300
						});
						break;
					case 3:
						uni.navigateTo({
							url: '/pages/center/withdraw/withdraw',
							animationType: 'pop-in',
							animationDuration: 300
						});
						break;
					case 4:
						uni.navigateTo({
							url: '/pages/center/fans/fans',
							animationType: 'pop-in',
							animationDuration: 300
						});
						break;
					case 5:
						uni.navigateTo({
							url: '/pages/center/myCollect/myCollect',
							animationType: 'pop-in',
							animationDuration: 300
						});
						break;
					case 6:
						uni.navigateTo({
							url: '/pages/center/myAsset/myAsset',
							animationType: 'pop-in',
							animationDuration: 300
						});
						break;
					case 7:
						uni.navigateTo({
							url: '/pages/center/withdraw/withdraw',
							animationType: 'pop-in',
							animationDuration: 300
						});
						break;
					case 8:
						uni.navigateTo({
							url: '/pages/center/myAsset/myAsset?num=' + num,
							animationType: 'pop-in',
							animationDuration: 300
						});
						break;
					case 9:
						uni.navigateTo({
							url: '/pages/center/withdraw/withdrawRecord',
							animationType: 'pop-in',
							animationDuration: 300
						});
						break;
					case 10:
						uni.navigateTo({
							url: '/pages/center/myInvite/myInvite',
							animationType: 'pop-in',
							animationDuration: 300
						});
						break;
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.myself {
		background-color: #f7f7f8;
		min-height: 100vh;
		position: relative;

		.bg {
			position: fixed;
			top: 0;
			// top: var(--status-bar-height);
			left: 0;
			width: 100%;
			height: 344rpx;
			z-index: 0;
		}

		.title {
			color: #101010;
			font-weight: 600;
		}

		.my_main {
			position: absolute;
			left: 0;
			width: 100%;
			z-index: 2;
		}

		.topheader {
			margin: 20rpx;
			background-color: rgba(255, 255, 255, 0.96);
			border-radius: 12rpx;

			.rightinfo {

				// .loginbox {
				// 	color: #3d98f2;
				// 	font-weight: 600;
				// 	font-size: 40rpx;
				// 	text-align: left;
				// 	margin-left: 28rpx;
				// 	border: none;
				// }
				.logined {
					.logintop {
						.user {
							font-size: 32rpx;
							font-weight: 600;
							margin-right: 16rpx;
						}

						.vip {
							color: #f8f8f9;
							font-size: 24rpx;
							background-color: #56a8f9;
							border-radius: 50rpx;
							padding: 4rpx 16rpx;
						}
					}

					.invitation {
						// background-color: #ededee;
						// border-radius: 50rpx;
						// padding: 0 20rpx;
						font-size: 24rpx;
						margin-top: 10rpx;
						height: 54rpx;
						line-height: 54rpx;

						.lines {
							display: inline-block;
							width: 4rpx;
							height: 28rpx;
							line-height: 54rpx;
							// height: 54rpx;
							background-color: #bbbbbb;
							margin: 0 25rpx;
						}
					}
				}
			}
		}

		.myinfo {
			margin: 20rpx;
			background-color: #ffffff;
			border-radius: 12rpx;

			.title {
				padding: 22rpx 26rpx;
				text-align: left;
			}

			.infodata {
				.top {
					padding: 18rpx 26rpx;
					color: rgba(16, 16, 16, 0.51);
				}

				.header {
					.assetli {
						width: 50%;
						padding: 12rpx 26rpx;
						font-size: 24rpx;
						color: rgba(16, 16, 16, 0.72);

						.headline {}

						.num {}
					}
				}
			}
		}

		.fans {
			margin: 0 24rpx;
			border-radius: 12rpx;
			background-color: #ffffff;

			.header {
				padding: 22rpx 26rpx;
			}

			.fansdata {
				// margin-top: 20rpx;
				text-align: center;
				padding: 16rpx 26rpx;

				.num {
					font-weight: 600;
				}
			}
		}

		.collect {
			margin: 20rpx;
			background-color: #ffffff;
			border-radius: 12rpx;
			padding: 22rpx 26rpx;
		}
	}
</style>
